<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>xx学校后台管理系统</title>
    <link rel='stylesheet' href='./stylesheets/style.css' />
    <script src="./javascripts/jquery-2.1.4/jquery.js"></script>
</head>

<body>
    <div class="wrap">
        <h1>XX学校后台管理系统</h1>
        <div class="user">
            <label for="">账号：</label>
            <input type="text" placeholder="username" id="username">
        </div>
        <div class="user">
            <label for="">密码：</label>
            <input type="password" placeholder="password" id="password">
        </div>
        <div class="log"><a href="javascript:;" id="login">登录</a></div>
    </div>

    <script>
        ;
        (function() {
            let username = $('#username');
            let password = $('#password');
            $('#login').click(function() {
                //用户和密码不为空判断
                if (username.val() === '' && password.val() === '') {
                    alert('请输入用户名和密码！');
                    return;
                }
                //用户名验证
                if (!/[A-z]{6,}/g.test(username.val())) {
                    alert('用户名格式错误！');
                    return;
                }
                //密码验证
                if (!/\w{6,}/g.test(password.val())) {
                    alert('密码格式错误！');
                    return;
                }
                // 与后台进行数据交互
                $.post('http://1.14.68.137:9090/login', {
                    username: username.val(),
                    password: password.val()
                }, result => {
                    if (result.code == -1) {
                        alert('登陆失败');
                    } else {
                        // alert('登陆成功，稍后跳转');
                        localStorage.setItem('token', result.token);
                        location.href = 'http://localhost:80/html/home.html';
                    }
                })
            })
        })();
    </script>
</body>

</html>